<template>
  <div class="park-card-item-wrapper" @click="handleItemClick">
    <el-card class="box-card" shadow="hover">
      <div class="top-wrapper">
        <slot name="img">
          <div class="img-vr">
            <el-image fit="cover" :src="imgUrl" />

            <slot name="vrIcon">
              <div v-if="showVR" class="vr">
                <i class="iconfont icon-lifangti" />
                <span class="vr-name">VR全景</span>
              </div>
            </slot>
          </div>
        </slot>
      </div>

      <div class="bottom-wrapper">
        <slot name="name">
          <div class="item-name">{{ name }}</div>
        </slot>

        <slot name="addrs">
          <div class="item-addrs">
            <i class="addrs-icon el-icon-location-information" />
            <div class="addrs">{{ addrs }}</div>
          </div>
        </slot>

        <slot name="tags">
          <div class="item-tags">
            <div v-for="item in tags" :key="item" class="item-tag">{{ item }}</div>
          </div>
        </slot>

        <slot name="baseInfo">
          <div class="item-base-info">
            <div v-for="item in baseInfoList" :key="item.label" class="label-value-unit">
              <div>{{ item.label }}：</div>
              <div>{{ item.value }}</div>
              <div v-if="item.unit">{{ item.unit }}</div>
            </div>
          </div>
        </slot>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {},
  props: {
    dataObj: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {}
  },
  computed: {
    showVR() {
      return this.dataObj.vrLink
    },
    imgUrl() {
      const imgList = this.dataObj?.data?.imgList
      return (imgList && imgList[0] && imgList[0].url) || 'https://iph.href.lu/254x160'
    },
    name() {
      return this.dataObj.data?.name || '--'
    },
    addrs() {
      return this.dataObj.data?.addrs || '--'
    },
    tags() {
      const { typeLabel, tags } = this.dataObj.data || {}
      const arr = []
      typeLabel && arr.push(typeLabel)
      if (Array.isArray(tags) && tags.length > 0) {
        arr.push(...tags)
      }
      return arr
    },
    baseInfoList() {
      const { area, rentOrSaleLabel, rentOrSale, price, rent } = this.dataObj.data || {}
      const arr = [
        {
          label: '商铺面积',
          value: '--',
          unit: '㎡',
        },
        {
          label: '租售类型',
          value: '--',
          unit: '',
        },
        {
          label: '出租价格',
          value: '--',
          unit: '元/平米*月',
        },
      ]

      area && (arr[0].value = area)
      rentOrSaleLabel && (arr[1].value = rentOrSaleLabel)

      if (rentOrSale === '1' && rent) {
        arr[2].label = '出租价格'
        arr[2].value = rent
      } else if (rentOrSale === '2') {
        arr[2].label = '出售价格'
        arr[2].value = price
        arr[2].unit = '元/平米'
      }

      return arr
    },
  },
  methods: {
    handleItemClick() {
      this.$emit('click', this.dataObj.id)
    },
  },
})
</script>
<style lang="scss" scoped>
.box-card {
  cursor: pointer;
}
.park-card-item-wrapper {
  @apply flex flex-col w-1/4 px-[4px] py-2;

  &:nth-child(4n) {
    padding-right: 0;
  }
  &:nth-child(4n + 1) {
    padding-left: 0;
  }

  .top-wrapper {
    .img-vr {
      @apply relative;
      .el-image {
        @apply w-full h-[150px] rounded-md;
      }
      .vr {
        @apply absolute
        top-2 right-2 bg-primary
        rounded-md py-1 px-2 flex space-x-2;

        .icon-lifangti {
          @apply text-white text-[14px];
        }

        .vr-name {
          @apply text-white text-[14px];
        }
      }
    }
  }

  .bottom-wrapper {
    @apply flex flex-col justify-between;

    .item-name {
      @apply text-[#333C57] text-[18px] mt-2 mb-2 overflow-hidden w-full whitespace-nowrap overflow-ellipsis;
    }

    .item-addrs {
      @apply text-[#888ea9] flex items-center mb-2;

      .addrs-icon {
        @apply flex-none;
      }

      .addrs {
        @apply ml-2 flex-1 overflow-hidden whitespace-nowrap overflow-ellipsis;
      }
    }

    .item-tags {
      @apply flex h-[26px] space-x-4 overflow-x-auto mb-2;

      &::-webkit-scrollbar {
        display: none;
      }

      .item-tag {
        @apply bg-[#e5f0ff] py-1 px-2 text-[#006eff] text-[12px]  rounded-[4px] whitespace-nowrap;
      }
    }

    .item-base-info {
      @apply flex flex-col text-[#888EA9] space-y-2;

      .label-value-unit {
        @apply flex;
      }
    }
  }
}
</style>
